<!doctype html>
<html>
    <head>
        <meta _charset="utf-8">
        <title>Demo</title>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/ui/ui.sortable.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/ui/ui.dialog.js"></script-->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>

        <!--script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script-->

        <style>

            body {cursor:default;}
            /* Cadre bouton fermer */
            #BoutonClose {
                width: 16px;
                height: 16px;
                float : right;
                cursor:pointer;
            }

            /* Bouton Restaurer navigation */
            #RestaureNavigation {
                float:right;
                width: 200px;
                height: 60px;
                text-align: center;
            }

            #Sortable {
                list-style-type: none; margin: 0; padding: 0;
            }
            #Sortable li {
                margin: 3px 3px 3px 0;
                padding: 1px;
                float: left;
                width: 150px;
                height: 150px;
                font-size: 1.5em;
                text-align: center;
                _cursor:move;
            }
        </style>

        <script>

            $(document).ready(function(){

                // On rend la liste Sortable sortable
                $("#Sortable").sortable();

                // $("#Sortable").click(function() {} );

                // On empêche les éléments de la liste d'être sélectionnable
                $("#Sortable").disableSelection();


                // On cache pour le moment le bloc qui nous permettra de restaurer un bloc fermer
                $("#RestaureNavigation").hide();


                // On cache aussi la boite de dialogue qu'on fera apparaitre en cliquant sur le bouton fermer
                $("#SupprimerBloc").hide();

                function callback(value) {
                    if(value)
                        $("#RestaureNavigation").show(1000);
                    else
                        $("#RestaureNavigation").hide(1000);
                };

                $("#RestaureNavigation").click(function() {
                    $("#BlocSort1").show("fold", "", "slow", callback(false));


                });

                // On définit un comportement quand on clique sur le bloc BoutonClose du Bloc 1
                $("#BoutonClose").click(function() {

                    // On créer la boite de dialogue à partir du bloc SupprimerBloc
                    $("#SupprimerBloc").dialog({
                        bgiframe: true, // Paramètre pour assurer la compatibilité avec IE
                        resizable: false, // On ne permet pas le redimensionnement de la fenetre de dialogue
                        height:220, // 220 pixels de hauteurs
                        modal: true,
                        overlay: {
                            backgroundColor: '#000',
                            opacity: 0.5
                        },

                        buttons: {
                            'Oui': function() {

                                // On ferme le Bloc A avec l'effet désiré
                                // Grâce au dernier paramètre qui exécute une action lorsqu'on a fini l'action en cours(callback)
                                // on fait apparaitre un bouton pour restaurer le bloc fermé (on attend 1000 ms avant de le faire réapparaitre)
                                // hide( effect, [options], [speed], [callback] )
                                $("#BlocSort1").hide("fold", "", "slow", callback(true));
                                $(this).dialog('close');
                            },

                            'Annuler': function() {
                                // Si l'utilisateur clique sur annuler on ferme la fenêtre de dialogue
                                $(this).dialog('close');
                            }
                        }
                    }); // dialog
                }); // click

            });// doc ready

        </script>

    </head>
    <body>

        <div id="Onglet-2">

            <ul id="Sortable">

                <li id="BlocSort1" class="ui-state-default">
                    <div id="BoutonClose" class="ui-state-default ui-corner-all" title=".ui-icon-circle-close">
                        <span class="ui-icon ui-icon-circle-close"></span>
                    </div>
                    Un</li>

                <li class="ui-state-default">Deux</li>
                <li class="ui-state-default">Trois</li>
                <li class="ui-state-default">Quatre</li>

            </ul>
            <div id="RestaureNavigation" class="ui-state-hover">
                <p>Restaurer A</p>
            </div>

            <div id="SupprimerBloc" title="Alerte">
                <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">
                    </span>Supprimer le bloc A?</p>
            </div>
        </div>

    </body>
</html>